<template>
	<div>
		<div class="weex-search">
			<div class="weex-col">
				<div class="weex-col-7-8">
					<input type="text" placeholder="请输入小区名称" class="search weex-search-input small-size" @focus="inputOnFocus"
						   value="" @input="changeKeys" />
				</div>
				<div class="weex-col-1-8" v-show="onfocus">
					<a class="search-button weex-search-button" href="#">
						<text class="search-text  weex-search-button-text small-size" @click="searchKey">搜索</text>
					</a>
				</div>
			</div>
		</div>
		<scroller class="scroller">
			<div v-if="data.length > 0">
				<div class="cell" v-for="(item, i) in data">
					<div class="panel"  @click="toDetail(item.communityId)">
						<text class="text1 normal-size">{{item.communityName}}</text>
						<text class="text3"><text class="text4">认证状态</text><text class="text4-1 small-size">{{item
							.apprStatusName}}</text></text>
						<text class="text3"><text class="text4">所属物业</text><text class="text4-1 small-size">{{item
							.tenantName}}</text></text>
						<text class="text3"><text class="text4">创建来源</text><text class="text4-1 small-size">{{item
							.source}}</text></text>
						<text class="text3"><text class="text4">创建时间</text><text class="text4-1 small-size">{{item
							.gmtCreatedStr}}</text></text>
					</div>
				</div>
			</div>
			<div v-else class="no-result-wrap">
				<text class="no-result normal-size">没有符合条件的小区</text>
			</div>
			<loading class="loading" @loading="onloading" :display="showLoading">
				<text class="indicator"></text>
			</loading>
		</scroller>
	</div>
</template>
<script>
	var dingtalk = require('weex-dingtalk');
	const dd = dingtalk.apis;
	const modal = weex.requireModule('modal')

	const getData = '/community/ajax/selectbypage   ';
	const turnPgae =  _webpath + '/community/todetail';
	export default {
		data () {
			return {
				showLoading: 'hide',
				data: [],
				keyWords: '',
				pageNum: 1,
				onfocus: false,
			}
		},
		mounted: function(){
			dingtalk.ready(function(){
				// 设置导航
				const dd = dingtalk.apis;
				dd.biz.navigation.setTitle({
					title: '小区查询'
				});
				dd.biz.navigation.setRight({
					control: false,
					show: false,
					text: ''
				});
			});
			this.getList();
//			var list  = [];
//			for(var i = 0; i < 2;i++){
//				list.push({
//					communityName: 'name'+i,
//					apprStatusName: 'status',
//					source: 'source'+i,
//					gmtCreatedStr: '2017-05-12'+i,
//					tenantName: 'tenantName'+i
//				});
//			}
//			this.data = list;
		},
		methods: {
			onloading (event) {
				this.showLoading = 'show';
				var self = this;
				modal.toast({ message: '数据正在加载中', duration: 1 });
				setTimeout(() => {
					self.pageNum ++;
				self.getList();
				self.showLoading = 'hide'
			}, 0)
			},

			changeKeys: function (e) {
				e.stopPropagation();
				this.keyWords = e.value;
			},
			inputOnFocus: function (e) {
				e.stopPropagation();
				this.onfocus = true;
			},
			inputOnBlur: function (e) {
				e.stopPropagation();
				//this.onfocus = false;
			},
			searchKey() {
				this.data = [];
				this.pageNum = 1;
				this.getList();
				this.onfocus = false;
			},
			getList: function(){
				var self = this;
				var obj = {
					communityName: this.keyWords,
					pageSize: 10,
					pageNum: self.pageNum
				};
				initFormAjax(getData,obj,true,'POST',function (data) {
					if(data.messageType == 'SUCCESS') {
						var list = data.valueObj;
						//communityStatusName
//						for(var i = 0; i < list.length;i++){
//							if(list[i].apprStatusName){
//								list[i].apprStatusName = ' ('+list[i].apprStatusName+ ')';
//							}else {
//								list[i].apprStatusName = '';
//							}
//						}
						var temp = self.data;
						temp = temp.concat(list);
						self.data = temp;
						if(temp.length==0) {
							$('.no-result-wrap').show();
						}else {
							$('.no-result-wrap').hide();
						}
					}
				});
			},
			toDetail: function(id){
//				dingtalk.ready(function(){
//					// 页面跳转
//					const dd = dingtalk.apis;
//					dd.biz.util.openLink({
//						url: turnPgae + '?communityId=' + id
//					});
//				});

				location.href = turnPgae + '?communityId=' + id;
			},
		}
	}
</script>
<style scoped>
	.panel {
		width: 100%;
		padding: 15px 30px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
	}
	.text1 {
		display: inline-block;
		padding: 0 0 4px 10px;
	}
	.text2 {
		display: inline-block;
		position: absolute;
		padding: 6px 0;
		font-size: 20px;
		color: #999;
	}
	.text3 {
		display: inline-block;
		padding: 4px 0 2px 12px;
		line-height: 14px;
		color: #999;
	}
	.text4 {
		display: inline-block;
	//	width: 180px;
		color: #999;
		font-size: 24px;
	}
	.text4-1 {
		float: right;
		display: inline-block;
	//	width: 180px;
	//	color: #999;
		font-size: 24px;
		text-align: right;

	}
	.text5 {
		display: inline-block;
		color: #999;
		float: right;
		padding-right: 20px;
	}
	.loading {
		justify-content: center;
	}
	.indicator {
		color: #888888;
		font-size: 37px;
		padding-top: 37px;
		padding-bottom: 37px;
		text-align: center;
	}
	.no-result-wrap {
		display: none;
		margin-top: 80px;
	}
	.no-result{
		color: #666;
		line-height: 75px;
		text-align: center;
	}
</style>